<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>
        <el-form ref="form" :model="form" :rules="rules" label-width="130px">
          <el-card>
            <div slot="header" class="clearfix">
              <span>车次信息</span>
            </div>
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="承运商" prop="carrierId">
                  <el-select v-model="form.carrierId" placeholder="请选择承运商" class="input-width" :disabled="!form.isShow">
                    <el-option v-for="item in carrierOptions" :key="item.id" :label="item.nickName" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="车次名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入车次名称" class="input-width" />
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="线路" prop="lineId">
                    <el-select v-model="form.lineId" placeholder="请选择线路" class="input-width">
                      <el-option v-for="item in lineOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="form.status" placeholder="请选择状态">
                    <el-option v-for="dict in dict.type.tms_schedule_status" :key="dict.value" :label="dict.label"
                      :value="dict.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="描述" prop="memo">
                  <el-input v-model="form.memo" type="textarea" placeholder="描述" style="width: 76vw;" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="!form.id">
              <el-col :span="8">
                  <el-form-item label="安排时间" prop="dateList">
                    <el-date-picker
                          v-model="form.dateList"
                          style="margin-right: 10px;"
                          type="datetimerange"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm"
                          :default-time="['00:00:00', '23:59:59']"/>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="每周时间" prop="weeks">
                    <el-select v-model="form.weeks" placeholder="请选择每周时间" multiple style="width: 500px;">
                      <el-option v-for="dict in dict.type.tms_schedule_week" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <el-row v-if="form.id">
              <el-col :span="6">
                <el-form-item label="日期" prop="day">
                  <el-date-picker  v-model="form.day" type="datetime"
                  format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm" placeholder="请选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <div slot="header" class="clearfix">
              <span>车辆绑定信息</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addCarDriver">新增</el-button>
            </div>
            <el-table :loading="loading" :data="form.items" border stripe>
              <el-table-column label="车牌号">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.carId" placeholder="请选择车牌号">
                    <el-option v-for="item in carOptions" :key="item.id" :label="item.carNumber" :value="item.id" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="驾驶员">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.driverId" placeholder="请选择驾驶员">
                    <el-option v-for="item in driverOptions" :key="item.id" :label="item.personName" :value="item.id" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="接单量">
               <template slot-scope="scope">
                 <el-input v-model="scope.row.nums"/>
               </template>
              </el-table-column>
              <el-table-column label="已接单">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.takes"/>
                </template>
              </el-table-column>
              <el-table-column label="进行中">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.durings"/>
                </template>
              </el-table-column>
              <el-table-column label="已完成">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.finishes"/>
                </template>
              </el-table-column>
              <el-table-column label="异常数">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.errors"/>
                </template>
              </el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.status" placeholder="请选择状态">
                    <el-option v-for="dict in dict.type.tms_car_work_status" :key="dict.value" :label="dict.label"
                      :value="dict.value"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="delCarDriver(scope)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-card>
            <div slot="header" class="clearfix">
              <span>运输统计</span>
            </div>
            <el-row :gutter="15">
              <el-col :span="6">
                <el-form-item label="接单量" prop="nums">
                  <el-input v-model="form.nums" placeholder="请输入接单量" class="input-width"/>
                </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="6">
                <el-form-item label="已接单" prop="takes">
                  <el-input v-model="form.takes" placeholder="请输入已接单" class="input-width"/>
                </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="6">
                <el-form-item label="进行中" prop="durings">
                  <el-input v-model="form.durings" placeholder="请输入进行中" class="input-width"/>
                </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="6">
                <el-form-item label="已完成" prop="finishes">
                  <el-input v-model="form.finishes" placeholder="请输入已完成" class="input-width"/>
                </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="6">
                <el-form-item label="异常数" prop="errors">
                  <el-input v-model="form.errors" placeholder="请输入异常数" class="input-width"/>
                </el-form-item>
                </el-col>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="close()">取 消</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import {
    initBean,
    getSchedule,
    addSchedule,
    updateSchedule
  } from "@/api/tms/schedule";
  import {delScheduleDtl} from '@/api/tms/scheduleDtl'
  import {
    listCarrier
  } from '@/api/tms/carrier';
  import {
    listLines
  } from '@/api/tms/lines';
  import {
    listCar
  } from '@/api/tms/car';
  import {
    listDriver
  } from '@/api/tms/driver';
  export default {
    dicts: ['tms_schedule_status', 'sys_del_flag','tms_car_work_status','tms_schedule_week'],
    data(){
      return {
        carrierOptions: [],
        lineOptions: [],
        carOptions:[],
        driverOptions:[],
        // 表单参数
        form: {},
        // 遮罩层
        loading: false,
        open:false,
        // 表单校验
        rules: {
          carrierId: [{
            required: true,
            message: "承运商不能为空",
            trigger: "blur"
          }],
          // deptId: [{
          //   required: true,
          //   message: "部门不能为空",
          //   trigger: "blur"
          // }],
          name: [{
            required: true,
            message: "车次名称不能为空",
            trigger: "blur"
          }],
          day: [{
            required: true,
            message: "日期不能为空",
            trigger: "blur"
          }],
          lineId: [{
            required: true,
            message: "线路不能为空",
            trigger: "blur"
          }],
          dateList: [{
            required: true,
            message: "安排时间不能为空",
            trigger: "blur"
          }],
          weeks: [{
            required: true,
            message: "每周时间不能为空",
            trigger: "blur"
          }]
        }
      }
    },
    created() {
      this.reset();
      this.getCarrier();
      this.getLine();
      this.getCar();
      this.getDriver();
      const id = this.$router.currentRoute.params.id;
      if(id != undefined && id != ''){
        this.getScheduleInfo(id)
      }else{
        this.getInit();
      }
    },
    methods:{
      getInit(){
        initBean().then(response=>{
          this.form = response.data;
        })
      },
      getScheduleInfo(id){
        getSchedule(id).then(response=>{
          this.form = response.data;
        })
      },
      /** 承运商列表 */
      getCarrier() {
        listCarrier().then(response => {
          this.carrierOptions = response.rows;
        })
      },
      /** 线路列表 */
      getLine() {
        listLines().then(response => {
          this.lineOptions = response.rows;
        })
      },
      /** 车辆列表 */
      getCar() {
        listCar().then(response => {
          this.carOptions = response.rows;
        })
      },
      /** 司机列表 */
      getDriver() {
        listDriver().then(response => {
          this.driverOptions = response.rows;
        })
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          carrierId: undefined,
          deptId: undefined,
          name: undefined,
          day: undefined,
          lineId: undefined,
          status: undefined,
          memo: undefined,
          nums: 0,
          takes: 0,
          durings: 0,
          finishes: 0,
          errors: 0,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          delFlag: undefined
        };
        this.resetForm("form");
      },
      addCarDriver(){
        this.loading = true;
        let data = {
          id:'',
          carId:'',
          carNumber:'',
          driverId:'',
          driverName:'',
          nums:0,
          takes:0,
          durings:0,
          finishes:0,
          errors:0,
          status:'0'
        }
        if(this.form.items && this.form.items.length > 0){
          this.form.items.push(data)
          this.loading = false;
        }else{
          this.form.items = [];
          this.form.items.push(data)
          this.loading = false;
        }
      },
      delCarDriver(scope){
        let index = scope.$index;
        let item = scope.row;
        if(item.id){
          delScheduleDtl(item.id)
        }
        this.form.items.splice(index,1)
      },
      handleClose(){
        this.open = false;
      },
      /** 关闭按钮 */
      close() {
        const obj = {
          path: "/tms/schedule",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateSchedule(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.close()
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addSchedule(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.close()
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });

      },
    }
  }
</script>

<style lang="scss" scoped>
  .input-width {
    width: 214px;
  }

  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .main_container {
    width: 100%;
    height: 100%;
  }

  .el-card {
    margin-bottom: 5px;
  }

  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }

  .footer-class {
    text-align: right;
    margin-top: 15px;
  }

  //顶部距离css
  .topItem {
    margin-bottom: 0px;
  }

  .areaSelect {
    width: 100%;
    padding-right: 5px;
  }
</style>
